<template>
  <div>
    <div class="table-component">
      <div class="row">
        <div class="icon"></div>
        <div class="name">{{ buttons.name }}</div>
      </div>
      <div class="submits-btns">
        <div></div>
        <div class="submit-btns-right">
          <el-button
            type="primary"
            class="submit-btn-road"
            @click="roadSectionData(buttons)"
          >
            关联场库</el-button
          >
          <el-button type="primary" class="submit-btn-edit" @click="editData(buttons)">
            编辑</el-button
          >
        </div>
      </div>
    </div>
    <div class="row-content">
      <div class="title">
        <div style="min-width: 80px; display: flex">关联场库：</div>
        <div v-for="item in buttons.lotNameList" :key="item">
          {{ item }}
          <span v-if="buttons.lotNameList.length > 1">&nbsp;</span>
        </div>
      </div>
    </div>
    <RelevanceRoadComponent ref="relevanceRoadComponentRef" @update="updateLotList" />
  </div>
</template>

<script setup>
import { ref, reactive, shallowRef } from "vue";
import RelevanceRoadComponent from "./relevance-road.vue";
import { useRouter } from "vue-router";

const props = defineProps({
  buttons: {
    type: Object,
    default: () => {},
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const router = useRouter();
const emits = defineEmits(["updateLotNameList"]);
const relevanceRoadComponentRef = ref(null);
const roadSectionData = (record) => {
  if (relevanceRoadComponentRef.value) {
    relevanceRoadComponentRef.value.init(record);
  }
};
const editData = (record) => {
  const rowDataJson = JSON.stringify(record.id);
  router.push({
    path: "/park/config/chargingRule/edit",
    query: {
      data: encodeURIComponent(rowDataJson),
    },
  });
};
const updateLotList = () => {
  emits("updateLotNameList");
};
</script>

<style lang="less" scoped>
.table-component {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #cccccc;
  padding-bottom: 10px;

  .icon {
    width: 6px;
    height: 24px;
    background: #007aff;
  }
  .name {
    font-weight: 600;
    font-size: 20px;
    color: #333333;
    margin-left: 12px;
  }
  .submit-btns {
    display: flex;
    justify-content: space-between;
  }
  .submit-btns-right {
    display: flex;
  }
  .submit-btn-road {
    color: #13cc4e;
    background-color: #ffffff;
    border: 1px solid #13cc4e;
    border-radius: 2px;
    margin-left: 13px;
    padding: 5px 9px;
    font-weight: 400;
    font-size: 16px;
    color: #15c34c;
  }
  .submit-btn-edit {
    color: #007aff;
    background-color: #ffffff;
    border: 1px solid #007aff;
    border-radius: 2px;
    margin-left: 13px;
    padding: 5px 9px;
    font-weight: 400;
    font-size: 16px;
    color: #007aff;
  }
}
.row {
  display: flex;
  align-items: center;
}
.row-content {
  margin-top: 24px;
  .title {
    background: #eef6ff;
    border-radius: 1px;
    border: 1px solid #bfdeff;
    padding: 5px 14px;
    font-weight: 600;
    font-size: 16px;
    color: #333333;
    display: flex;
    align-items: center;
  }
}
</style>
